<script >
export default {
    name:"GoodsData",

    data(){
        return {
            user: JSON.parse(sessionStorage.getItem("user")),

            tableData:[],
            pageSize:12,
            pageNum:1,
            total:0,

            AddToCartVisible:false,
            currentItem:null,
            unorder:{
                id:null,
                uid:null,
                gid:null,
                time:null,
                num:null,
            },
            searchVisible:false,
            isSearch:false,
            searchForm:{
                id:null,
                name:null,
                price:null,
                picturekey:null,
            },
        }
    },
    methods:{

        loadPost() {
            if(this.isSearch){
                this.$axios.post(this.$httpUrl + '/goods/querylike', {
                    "pageSize": this.pageSize,
                    "pageNum": this.pageNum,
                    "param": this.searchForm
                }).then(res => res.data).then(res => {
                    console.log(res)
                    this.total = res.total
                    this.tableData = res.data
                })

            }else {
                this.$axios.post(this.$httpUrl + '/goods/querylike', {
                    "pageSize": this.pageSize,
                    "pageNum": this.pageNum,
                    "param": {
                        "id":'',
                        "name":'',
                        "price":'',
                        "picturekey":'',
                    }
                }).then(res => res.data).then(res => {
                    console.log(res)
                    this.total = res.total
                    this.tableData = res.data
                })
            }
        },




        handleCurrentChange(pageNum) {
            this.pageNum = pageNum;
            this.loadPost();
        },



        addToCart(item) {
            this.currentItem = item;    // 设置当前物品信息
            this.unorder.gid = item.id;
            this.unorder.num = 1;           // 默认数量为 1
            this.AddToCartVisible = true;   // 打开对话框

            this.$axios.post(this.$httpUrl + '/browse/saveORmodify', {
                "id": this.unorder.id,
                "uid": this.unorder.uid,
                "gid": this.unorder.gid,
                "time": this.unorder.time,
            }).then(res=>res.data).then(res => {
                if (res.code === 200) {
                    this.$notify({
                        title: '成功',
                        message: '添加浏览记录成功',
                        type: 'success'
                    });
                    this.loadPost();
                }
                else
                    this.$notify.error({
                        title: '错误',
                        message: '添加浏览记录失败'
                    });
            })

        },
        confirmAddToCart(){
            this.$axios.post(this.$httpUrl + '/unorder/saveORmodify', {
                "id": this.unorder.id,
                "uid": this.unorder.uid,
                "gid": this.unorder.gid,
                "time": this.unorder.time,
                "num": this.unorder.num,
            }).then(res=>res.data).then(res => {
                if (res.code === 200) {
                    this.$notify({
                        title: '成功',
                        message: '添加购物车成功',
                        type: 'success'
                    });
                    this.loadPost();
                }
                else
                    this.$notify.error({
                        title: '错误',
                        message: '添加购物车失败'
                    });
            })
            this.currentItem = null;
            this.unorder.gid = null;
            this.unorder.num = 1;
            this.AddToCartVisible = false;
        }
    },

    beforeMount() {
        this.loadPost();
        this.unorder.uid = this.user.id;
    }
}
</script>

<template>
    <div>
        <el-row type="flex" class="row-bg" justify="left" style="height: 5vh;padding: 0;margin: 0;">

            <el-col :span="2"><el-button size="medium" icon="el-icon-search"
                                         @click="searchVisible=true" ></el-button></el-col>
        </el-row>
        <el-row :gutter="20" style="min-height:78vh;width:86vw ">
            <!-- 遍历 tableData 数组，生成每个数据项的卡片 -->
            <el-col :span="6" v-for="item in tableData" :key="item.id">
                <el-card :body-style="{ padding: '0px' }" style="height: 80%;width: 80%;margin: 20px" shadow="hover">
                    <img :src=item.picturekey class="image">
                    <div style="padding: 14px;">
                        <span>{{ item.name }}</span>
                    </div>
                    <div class="card-body">
                        <p>价格: <span>{{ Number(item.price).toFixed(4) }}</span></p>
                    </div>
                    <div class="bottom">
                        <el-button class="button" type="text" @click="addToCart(item)">加入购物车</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-pagination
            background
            layout="total,prev, pager, next,jumper"
            style="text-align: center;height: 10vh"
            :total=this.total
            @current-change="handleCurrentChange">
        </el-pagination>


        <el-dialog
            title="筛选条件"
            :visible.sync="searchVisible"
            width="30%"
            :before-close="(done)=>{loadPost();done()}">

            <el-form :model="searchForm" label-width="80px">
                <el-form-item label="ID">
                    <el-input v-model="searchForm.id"></el-input>
                </el-form-item>
                <el-form-item label="物品名">
                    <el-input v-model="searchForm.name"></el-input>
                </el-form-item>
                <el-form-item label="启用筛选条件">
                    <el-switch v-model="isSearch"></el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="() => { searchVisible = false;loadPost() }">确 定</el-button>
            </span>
        </el-dialog>

        <!-- Dialog 对话框 -->
        <el-dialog
            title="加入购物车"
            :visible.sync="AddToCartVisible"
            width="30%"
            :before-close="(done)=>{
                this.currentItem = null;
                this.unorder.gid = null;
                this.unorder.num = 1;
                done()
            }">
            <div v-if="currentItem">

                    <!-- 商品信息 -->
                        <h2>{{ currentItem.name }}</h2>
                        <p>价格: {{ Number(currentItem.price).toFixed(4) }}</p>

                    <!-- 选择购买数量 -->
                    <el-row type="right">
                        购买数量:
                        <el-col >
                            <el-input-number
                                v-model="unorder.num"
                                :min="1"
                                :max="100"/>
                        </el-col>
                    </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmAddToCart">确定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<style scoped>
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}
</style>